<template>
  <div>
    <h3>Welcome，欢迎页 ：</h3>

    <el-row>
      <el-col :span="24" style="margin-bottom: 10px">
        <span>选择范围：</span>

        <el-date-picker
          v-model="fw"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          format="yyyy-MM"
          value-format="yyyy-MM"
          @change="
            drawT1();
            drawT2();
            drawT3();
          "
        >
        </el-date-picker>
        <span> {{ fw[0] }}至{{ fw[1] }}年每月发表博客统计图</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8"
        ><div id="t1" style="width: 100%; height: 300px"></div
      ></el-col>
      <el-col :span="8"
        ><div id="t2" style="width: 100%; height: 300px"></div
      ></el-col>
      <el-col :span="8"
        ><div id="t3" style="width: 100%; height: 300px"></div
      ></el-col>
    </el-row>
  </div>
</template>
<script>

//定义全局变量
var myChart1, myChart2, myChart3;

export default {
  data() {
    return {
      fw: ["2020-01","2021-12"],
    };
  },
  mounted: function () {
    this.drawT1();
    this.drawT2();
    this.drawT3();
  },
  methods: {
    f1() {
      console.log(this.fw);
    },
    async drawT1() {
      //获取数据
      //传多个参数
      let fd={
        k1:this.fw[0],
        k2:this.fw[1]
      }
      const { data: res } = await this.$http.post("/blog/tjBlogNum",this.$qs.stringify(fd));
      console.log(res);

      if (res.code !== 200) {
        return this.$message.error("查询信息失败！" + res.msg);
      }

      //let定义变量,组 数组
      let month = res.data.map((x) => {
        return x.month;
      });
      let num = res.data.map((x) => {
        return x.num;
      });
      console.log(month, num);

      if (myChart1 != null && myChart1 != "" && myChart1 != undefined) {
        myChart1.dispose(); //销毁
      }

      // 基于准备好的dom，初始化echarts实例    ,this.$echarts
      myChart1 = this.$echarts.init(document.getElementById("t1"));

      // 指定图表的配置项和数据,对象
      var option = {
        title: {
          text: "每月博客发表数量",
        },
        tooltip: {},
        legend: {
          data: ["数量"],
        },
        xAxis: {
          data: month,
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "line",
            data: num,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option);
    },

    async drawT2() {
      //获取数据
      let fd={
        k1:this.fw[0],
        k2:this.fw[1]
      }
      const { data: res } = await this.$http.post("/blog/tjBlogNum",this.$qs.stringify(fd));
      console.log(res);

      if (res.code !== 200) {
        return this.$message.error("查询信息失败！");
      }

      //let定义变量,组 数组
      let month = res.data.map((x) => {
        return x.month;
      });
      let num = res.data.map((x) => {
        return x.num;
      });
      console.log(month, num);

      if (myChart2 != null && myChart2 != "" && myChart2 != undefined) {
        myChart2.dispose(); //销毁
      }

      // 基于准备好的dom，初始化echarts实例    ,this.$echarts
      myChart2 = this.$echarts.init(document.getElementById("t2"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "每月博客发表数量",
        },
        tooltip: {},
        legend: {
          data: ["数量"],
        },
        xAxis: {
          data: month,
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20],
            data: num,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart2.setOption(option);
    },

    async drawT3() {
      //获取数据
      let fd={
        k1:this.fw[0],
        k2:this.fw[1]
      }
      const { data: res } = await this.$http.post("/blog/tjBlogNum",this.$qs.stringify(fd));
      console.log(res);

      if (res.code !== 200) {
        return this.$message.error("查询信息失败！");
      }

      let data = new Array();
      res.data.forEach((element) => {
        data.push({
          value: element.num,
          name: element.month + "月",
        });
      });
      console.log(data);

      if (myChart3 != null && myChart3 != "" && myChart3 != undefined) {
        myChart3.dispose(); //销毁
      }

      // 基于准备好的dom，初始化echarts实例    ,this.$echarts
      myChart3 = this.$echarts.init(document.getElementById("t3"));

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "每月博客发表数量",
        },
        series: [
          {
            name: "每月博客发表数量",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: data,
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart3.setOption(option);
    },
  },
};
</script>
<style scoped>
</style>





